{% extends 'base.html' %}

{% block content %}
<div class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">成绩预测结果</h1>
    <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        基于输入的学生成绩数据，以下是期末成绩的预测结果
    </p>
</div>

<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
            <i class="fa fa-user-circle text-primary mr-3"></i>输入的成绩信息
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-gray-50 rounded-lg p-6 text-center">
                <div class="text-sm font-medium text-gray-500 mb-1">出勤成绩</div>
                <div class="text-3xl font-bold text-gray-900">{{ attendance }}</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-6 text-center">
                <div class="text-sm font-medium text-gray-500 mb-1">作业成绩</div>
                <div class="text-3xl font-bold text-gray-900">{{ homework }}</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-6 text-center">
                <div class="text-sm font-medium text-gray-500 mb-1">期中成绩</div>
                <div class="text-3xl font-bold text-gray-900">{{ midterm }}</div>
            </div>
        </div>

        <h2 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
            <i class="fa fa-line-chart text-primary mr-3"></i>预测结果
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div class="border border-gray-200 rounded-xl p-6 text-center">
                <div class="text-lg font-medium text-gray-700 mb-4">挂科预测</div>
                <div class="text-5xl font-bold mb-2 {% if fail_prediction == '挂科' %}text-red-600{% else %}text-green-600{% endif %}">
                    {{ fail_prediction }}
                </div>
                <div class="text-sm text-gray-500">
                    基于逻辑回归模型预测
                </div>
            </div>
            <div class="border border-gray-200 rounded-xl p-6 text-center">
                <div class="text-lg font-medium text-gray-700 mb-4">分数段预测</div>
                <div class="text-5xl font-bold text-blue-600 mb-2">
                    {{ score_prediction }}
                </div>
                <div class="text-sm text-gray-500">
                    基于决策树模型预测
                </div>
            </div>
        </div>

        <div class="bg-gray-50 rounded-xl p-6">
            <h3 class="text-lg font-medium text-gray-800 mb-3">学习建议</h3>
            <ul class="space-y-2 text-gray-700">
                {% if fail_prediction == '挂科' %}
                <li class="flex items-start">
                    <i class="fa fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                    <span>根据预测结果，该学生有挂科风险，建议增加学习投入，特别是在薄弱环节加强复习。</span>
                </li>
                {% else %}
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                    <span>根据预测结果，该学生通过期末考试的可能性较高，建议保持当前学习状态。</span>
                </li>
                {% endif %}
                <li class="flex items-start">
                    <i class="fa fa-lightbulb-o text-yellow-500 mt-1 mr-2"></i>
                    <span>基于历史数据分析，提高出勤率和按时完成作业对提升期末成绩有显著帮助。</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-book text-blue-500 mt-1 mr-2"></i>
                    <span>建议针对期中成绩较低的知识点进行重点复习，可参考课程资料或寻求教师帮助。</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-center gap-4">
        <a href="/predict" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-custom text-center">
            <i class="fa fa-refresh mr-2"></i>输入新的成绩
        </a>
        <a href="/analyze_data" class="px-6 py-3 bg-primary hover:bg-blue-600 text-white rounded-lg transition-custom text-center">
            <i class="fa fa-bar-chart mr-2"></i>查看完整数据分析
        </a>
    </div>
</div>
{% endblock %}